<!--  -->
<template>
  <div>
    <ul class="fly-list">
      <li v-for="(item, index) in items" :key="'listitem' + index">
        <a href="user/home.html" class="fly-avatar">
          <img
            :src="
              item.uid
                ? item.uid.pic
                : 'http://localhost:3000/images/avatar/1.jpg'
            "
            alt="贤心"
          />
        </a>
        <h2>
          <a class="layui-badge">{{ item.catalog }}</a>
          <a @click="detail(item._id)" class="title">{{ item.title }}</a>
        </h2>
        <div class="fly-list-info">
          <a @click="uses(item.uid._id)" class="nam" link>
            <cite>{{ item.uid.name }}</cite>

            <i class="iconfont icon-renzheng" title="认证信息:XXX"></i>
            <i
              class="layui-badge fly-badge-vip"
              v-if="item.uid.isVip !== '0'"
              >{{ 'VIP' + item.uid.isVip }}</i
            >
          </a>
          <span>{{ item.created | moment }}</span>

          <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"
            ><i class="iconfont icon-kiss"></i> {{ item.fav }}</span
          >
          <span
            class="layui-badge fly-badge-accept layui-hide-xs"
            v-show="item.isEnd !== '0'"
            >已结</span
          >
          <span class="fly-list-nums">
            <i class="iconfont icon-pinglun1" title="回答"></i>
            {{ item.answer }}
          </span>
        </div>
        <div class="fly-list-badge">
          <div
            class="fly-list-badge"
            v-for="(tag, index) in item.tags"
            :key="'tag' + index"
          >
            <span
              class="layui-badge tag"
              v-if="tag.length !== 0 ? tag.name : false"
              :class="tag.class"
              >{{ tag.name }}</span
            >
          </div>
        </div>
      </li>
    </ul>
    <div style="text-align: center" v-show="isShow">
      <div class="laypage-main" v-if="!isEnd">
        <!-- <div class="laypage-main"  > -->
        <a @click.prevent="more()" class="laypage-next">更多求解</a>
      </div>
      <div class="nomore gray" v-else>没有更多了</div>
    </div>
  </div>
</template>

<script>
// import _ from "lodash";
export default {
  name: "ListItem",
  props: {
    lists: {
      default: () => [],
      type: Array,
    },
    isShow: {
      default: true,
      type: Boolean,
    },
    isEnd: {
      default: false,
      type: Boolean,
    },
    isTop: {
      default: false,
      type: Boolean,
    },
  },
  components: {},

  computed: {
    items () {
      _.map(this.lists, (item) => {
        switch (item.catalog) {
          case "ask":
            item.catalog = "提问";
            break;
          case "share":
            item.catalog = "分享";
            break;
          case "logs":
            item.catalog = "动态";
            break;
          case "notice":
            item.catalog = "公告";
            break;
          case "advice":
            item.catalog = "建议";
            break;
          case "discuss":
            item.catalog = "交流";
            break;
        }
      });
      return this.lists;
    },
  },
  mounted () { },
  methods: {
    more () {
      this.$emit("nextpage");
    },
    detail (tid) {
      this.$router.push({
        name: "detail",
        params: {
          tid: tid,
        },
      });
    },
    uses (uid) {
      this.$router.push({
        name: "home",
        params: {
          uid: uid,
        },
      });
    }
  },
  filters: {
    isTop () {
      if (this.lists.isTop == 1) {
        this.isTop = true;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  cursor: pointer;
}
.fly-list-badge {
  display: flex;
}
.tag {
  white-space: nowrap;
  bottom: 20px;
  left: 15px;
}
.fly-badge-vip {
  top: 2px;
  left: 2px;
}
.fly-list li h2 .layui-badge {
  left: 5px;
}
.nomore {
  font-size: 16px;
  padding: 30px 0;
}
.nam {
  cursor: pointer;
}
</style>
